<template>
	<view class="container">
		<cu-custom style="height: 0px !important;" bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			 <block slot="content">表单内容</block>
		</cu-custom>
		<view  class="bg-top bg-blue">
			<active-form style="width:100% !important" :formDate.sync="formData" num></active-form>
			
			<view style="width: 100%;height: 180rpx;">
			</view>
			<view v-if="showButton==1" class="publish-goods-wrap">
				<view :disabled="isButtonDisabled1" @click="tempsub" class="publish-goods-btn-left">暂存</view>
				<view :disabled="isButtonDisabled2" @click="sub1"  class="publish-goods-btn-right" >结束提交</view>
			</view>
		</view>
		<!-- 巡检异常工单弹出层 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" title="巡检异常" content="您巡检中出现异常,是否创建工单" :before-close="true"
				@confirm="SignExceptionAddSceneConfirm" @close="SignExceptionAddSceneClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
import ActiveForm from "@/components/active-form/active-form";
import request from '@/common/request.js';
import QQMapWX from "@/common/qqmap-wx-jssdk";
import time from "@/common/time.js";
export default {
  components: {
    ActiveForm,
  },
  data() {
    return {
		isButtonDisabled1:false,
		isButtonDisabled2:false,
		Desc:'',
		qrcodeList:[],
		getTopicParam:{
			// 1 未签到, 2 签到中,3 已完结
			scanStatus:1,
			JobId:'',
			qrcodeId:'',
			SignId:'',
		},
		requestData:{
			JobId:'',
			QrcodeId:'',
			SignId:'',
			Result:'',
			Longitude:'',
			Latitude:'',
			IsOk:1
		},
		watermark:{
			UserName:'',
			JobName:'',
			nowTime:'',
			address:'',
			jingweidu:'',
			customerName:'',
			fileType:968,  //999工单，967 巡检强制拍照，968 巡检答题拍照，969 维保图片
			chooseAlbum:false,
			onlyShow:'false',
		},
		formDataBase: [
		],
        formData: [],
		noJob:0,
		list: [
			{
				name: '正常',
				disabled: false
			},
			{
				name: '异常',
				disabled: false
			}
		],
		value: '正常',
		IsOk:1,
		showButton:1,
		msgType: 'error',
    };
  },
  onLoad(option){
	this.requestData.QrcodeId=option.qrcodeid
	this.requestData.SignId=option.signid
	this.getTopicParam.qrcodeId=option.qrcodeid
	this.getTopicParam.scanStatus=option.scanStatus
	this.getTopicParam.SignId=option.signid
	this.noJobd=option.noJob
	this.showButton=option.showButton
	if(option.onlyShow!=''&&option.onlyShow!=null&&option.onlyShow!=undefined){
		this.watermark.onlyShow=option.onlyShow
	}
	
	this.getSettings().then(() => {
		this.getTopicList()  
	});
  },
  onShow: function() {
  },
  methods: {
	  dialogToggle(type) {
	  	this.$refs.alertDialog.open()
	  },
	  SignExceptionAddSceneConfirm(){
	  	this.$refs.alertDialog.close()
		uni.navigateTo({
			url: '/pages/qrcode/scene/add/add?qrcodeid='+this.requestData.QrcodeId+'&Desc='+this.Desc
		})
	  },
	  SignExceptionAddSceneClose(){
	  	this.$refs.alertDialog.close()
		uni.showToast({ title:'添加成功', icon: '/static/success.png' });
		uni.getStorage({
			key: 'PageCur',
			success: function (res1) {
				setTimeout(() => {
					 uni.reLaunch({
						url: '/pages/index/tabbar?PageCur='+res1.data
					 });
				}, 0)
			},fail() {
				setTimeout(() => {
					 uni.reLaunch({
						url: '/pages/index/tabbar?PageCur=home'
					 });
				}, 0)
			}
		});
	  },
	 getSettings(){
		let that=this
		return new Promise((resolve, reject) => {
			uni.getStorage({
				key: 'userdata',
				success: function (res1) {
					that.watermark.UserName=res1.data.RealName
				}
			});
			uni.getStorage({
				key: 'JobId',
				success: function (res) {
					that.watermark.JobName=res.data.jobname;
			}
			});
			var qqmapsdk;
			uni.getLocation({
				type: 'gcj02',
				isHighAccuracy:true,
				success: function(res) {
					that.watermark.jingweidu=res.latitude+','+res.longitude
					qqmapsdk = new QQMapWX({
						key: "XNEBZ-NVULW-O5QRJ-Y4NVA-RADE3-BEFA7" //自己申请的key
					});
					qqmapsdk.reverseGeocoder({
						location: {
							latitude: res.latitude,
							longitude: res.longitude
						},
						success(addressRes) {
							//console.log(addressRes)
							that.watermark.address = addressRes.result.address;
						},
						fail(res) {
							
						}
					});
				}
			});
			that.watermark.nowTime=time.getNow()
			let opts = {
				url: 'api/getCustomerName',
				method: 'get'
			};
			request.httpTokenRequest(opts).then(res => {
				if(res.data.code == 1){
					that.watermark.customerName=res.data.msg
					//console.log(that.watermark.customerName)
				}
				else{
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			})	
			setTimeout(() => {
				resolve();
			}, 1000);
		});
	},
	// 选中某个单选框时，由radio时触发
	radioChange(e) {
		//console.log(e);
	},
	// 选中任一radio时，由radio-group触发
	radioGroupChange(e) {
		//console.log(e);
	},
	getTopicList(){
		let that=this
		uni.showLoading({title: '加载中'})
		if(that.noJobd==1){
			//计划外
			uni.showToast({ title:'请选择任务', icon: 'none' });
		}else{
			//计划内
			uni.getStorage({
				key: 'JobId',
				success: function (resStorage){
					that.getTopicParam.JobId=resStorage.data.id;
					let opts = {url: 'api/GetJobTopicList',method: 'get'};
					request.httpTokenRequest(opts,that.getTopicParam).then(res => {
						if(res.data.code == 1){
							let fromData=[]
							let result=res.data.data;
							
							let list=[]
							for(let i=0;i<result.length;i++){
								list=[]
								let item=result[i]
								//1 单选，2 多选，3数字，4文字，5时间，6 下拉，7 图片，8 视频
								if(item.TopicType==1||item.TopicType==2){
									let fromItem={}
									for(let j=0;j<item.TopicOptionArry.length;j++){
										let listItem={}
										if(item.TopicType==1){
											listItem.value=item.TopicOptionArry[j]
											listItem.label=item.TopicOptionArry[j]
										}else{
											listItem.value=item.TopicOptionArry[j]
											listItem.name=item.TopicOptionArry[j]
										}
										list.push(listItem)
									}
									fromItem.id=item.Id;
									fromItem.placeholder=item.TopicTips;
									fromItem.label=item.TopicTitle+'：';
									fromItem.type=item.TopicType==1?'radio':'checkbox';
									fromItem.list=list;
									
									//console.log('准备赋值：'+item.Value)
									let rules={}
									rules.value=item.Value
									rules.name='result'+i;
									rules.label=item.Value
									rules.verify=item.Required==1?true:false;
									rules.errMess='';
									if(item.TopicType==1){
										//showRemarkInput: false, // 新增字段
										//remarkValue: ''         // 新增字段
										rules.showRemarkInput=item.showRemarkInput
										rules.remarkValue=item.remarkValue
									}
									fromItem.rules=rules;
									if(item.TopicType==2){
										let ListCheckboxList=item.ListCheckboxList
										if(ListCheckboxList.length>0){
											let CheckboxList=[]
											if(ListCheckboxList!=null&&ListCheckboxList.length>0){
												for(let i=0;i<ListCheckboxList.length;i++){
													let CheckboxListEntity={}
													CheckboxListEntity.value=ListCheckboxList[i].value
													CheckboxListEntity.name=ListCheckboxList[i].name
													CheckboxListEntity.checked=ListCheckboxList[i].checked1
													CheckboxList.push(CheckboxListEntity)
												}
											}
											fromItem.list=CheckboxList
										}
									}
									//console.log("fromItem:"+JSON.stringify(fromItem))
									fromData.push(fromItem)
								}else if(item.TopicType==3){
									//3数字111
									let fromItem={}
									fromItem.id=item.Id;
									if(item.TopicUnit!=''){
										fromItem.placeholder=item.TopicTips+'('+item.TopicUnit+')';
									}else{
										fromItem.placeholder=item.TopicTips;
									}
									
									fromItem.label=item.TopicTitle+'：';
									fromItem.type='number';
									let rules={}
									//console.log('准备赋值：'+item.Value)
									rules.value=item.Value
									rules.name='result'+i;
									rules.label=item.Value
									rules.verify=item.Required==1?true:false;
									rules.errMess='';
									fromItem.rules=rules;
									fromData.push(fromItem)
								}else if(item.TopicType==4){
									//4文字
									let fromItem={}
									fromItem.id=item.Id;
									fromItem.placeholder=item.TopicTips;
									fromItem.label=item.TopicTitle;
									fromItem.type='textarea';
									let rules={}
									rules.value=item.Value
									rules.name='result'+i;
									rules.label='';
									rules.verify=item.Required==1?true:false;
									rules.errMess='';
									fromItem.rules=rules;
									fromData.push(fromItem)
								}else if(item.TopicType==5){
									//5时间
									let fromItem={}
									fromItem.id=item.Id;
									fromItem.label=item.TopicTitle;
									fromItem.type='time';
									let rules={}
									//console.log('准备赋值：'+item.Value)
									rules.name='result'+i;
									if(item.Value!=null&&item.Value!=''&&item.Value!=undefined){
										fromItem.placeholder=item.Value;
										rules.value=item.Value
										rules.label=item.Value
									}else{
										rules.value=''
										rules.label=''
										fromItem.placeholder='请选择';
									}
									rules.verify=item.Required==1?true:false;
									rules.errMess='';
									fromItem.rules=rules;
									fromData.push(fromItem)
								}
								else if(item.TopicType==6){
									let fromItem={}
									fromItem.id=item.Id;
									fromItem.placeholder="请选择";
									fromItem.label=item.TopicTitle;
									fromItem.type='select';
									fromItem.show=false
									fromItem.title="请选择"
									
									
									fromItem.list=item.selectOptions
									let rules={}
									
									//console.log('准备赋值：'+item.Value)
									rules.value=item.Value;
									rules.name='result'+i;
									rules.label=item.Value;
									rules.verify=item.Required==1?true:false;
									rules.errMess='请选择'+item.TopicTitle;
									fromItem.rules=rules;
									//console.log("select:"+JSON.stringify(fromItem.rules))
									fromData.push(fromItem)
								}else if(item.TopicType==7){
									let fromItem={}
									fromItem.id=item.Id;
									fromItem.placeholder="拍摄照片";
									fromItem.label=item.TopicTitle;
									fromItem.type='image';
									fromItem.show=false
									fromItem.title="请选择"
									
									//水印参数
									fromItem.watermark=that.watermark
									let ruleList=[]
									let rules1={}
									
									//console.log('准备赋值：'+item.ImageValues[0])
									if(item.ImageValues[0]!=undefined){
										rules1.value=item.ImageValues[0]
										
									}else{
										rules1.value=''
									}
									rules1.name='image1';
									rules1.verify=item.Required==1?true:false;
									rules1.errMess='请拍摄'+item.TopicTitle;
									ruleList.push(rules1)
									let rules2={}
									//console.log('准备赋值：'+item.ImageValues[1])
									if(item.ImageValues[1]!=undefined){
										rules2.value=item.ImageValues[1]
									}else{
										rules2.value=''
									}
									rules2.name='image2';
									rules2.verify=item.Required==1?true:false;
									rules2.errMess='请拍摄'+item.TopicTitle;
									ruleList.push(rules2)
									let rules3={}
									//console.log('准备赋值：'+item.ImageValues[2])
									if(item.ImageValues[2]!=undefined){
										rules3.value=item.ImageValues[2]
									}else{
										rules3.value=''
									}
									rules3.name='image3';
									rules3.verify=item.Required==1?true:false;
									rules3.errMess='请拍摄'+item.TopicTitle;
									ruleList.push(rules3)
									
									let rules4={}
									//console.log('准备赋值：'+item.ImageValues[3])
									if(item.ImageValues[3]!=undefined){
										rules4.value=item.ImageValues[3]
									}else{
										rules4.value=''
									}
									rules4.name='image4';
									rules4.verify=item.Required==1?true:false;
									rules4.errMess='请拍摄'+item.TopicTitle;
									ruleList.push(rules4)
									
									let rules5={}
									//console.log('准备赋值：'+item.ImageValues[4])
									if(item.ImageValues[4]!=undefined){
										rules5.value=item.ImageValues[4]
									}else{
										rules5.value=''
									}
									rules5.name='image5';
									rules5.verify=item.Required==1?true:false;
									rules5.errMess='请拍摄'+item.TopicTitle;
									ruleList.push(rules5)
									
									fromItem.rules=ruleList;
									//console.log('ImageRule:'+JSON.stringify(fromItem.rules))
									fromData.push(fromItem)
								}else if(item.TopicType==8){
									let fromItem={}
									fromItem.id=item.Id;
									fromItem.placeholder="拍摄视频";
									fromItem.label=item.TopicTitle;
									fromItem.type='video';
									fromItem.url=that.$request22.baseUrl
									fromItem.onlyShow=that.watermark.onlyShow
									
									let rules={}
									//console.log('准备赋值：'+item.Value)
									rules.name='video';
									rules.value=item.Value
									rules.verify=item.Required==1?true:false;
									rules.errMess='请拍摄'+item.TopicTitle;
									fromItem.rules=rules;
									fromData.push(fromItem)
								}else if(item.TopicType==11){
									//该功能未完待续
									let fromItem={}
									fromItem.id=item.Id;
									fromItem.placeholder="拍摄照片";
									fromItem.label=item.TopicTitle;
									fromItem.type='imageMulti';
									fromItem.show=false
									fromItem.title="请选择"
									fromItem.counts=6
									
									//水印参数
									fromItem.watermark=that.watermark
									let ruleList=[]
									let rules1={}
									
									//console.log('准备赋值：'+item.ImageValues[0])
									if(item.ImageValues[0]!=undefined){
										rules1.value=item.ImageValues[0]
										
									}else{
										rules1.value=''
									}
									rules1.name='image1';
									rules1.verify=item.Required==1?true:false;
									rules1.errMess='请拍摄'+item.TopicTitle;
									//
									//rules1.imagesList=['','','','','','']
									rules1.imagesList=['','','','','','']
									
									fromItem.rules=rules1;
									fromData.push(fromItem)
									//该功能未完待续
								}
								else{
									let fromItem={}
									fromItem.id=item.Id;
									fromItem.placeholder=item.TopicTips;
									fromItem.label=item.TopicTitle+'：';
									fromItem.type='textarea';
									let rules={}
									rules.value=item.Value
									rules.name='result'+i;
									rules.label='';
									rules.verify=item.Required==1?true:false;
									rules.errMess='';
									fromItem.rules=rules;
									fromData.push(fromItem)
								}
							}
							that.formData=[]
							that.formData=fromData
							
							//console.log(JSON.stringify(that.formData))
							
							uni.hideLoading();
						}
						else{
							uni.hideLoading();
							uni.showToast({ title: res.data.msg, icon: 'none' });
						}
					})
				},fail() {
					uni.showToast({ title:'请选择任务', icon: 'none' });
					
				}
			});
		}
	},
	tempsub(){
		let that=this
		if(that.isButtonDisabled1){return}
		that.isButtonDisabled1=true
		if(that.noJobd==1){
			//计划外
			uni.showToast({ title:'请选择任务', icon: 'none' });
			that.isButtonDisabled1 = false;
			return
		}
		uni.getStorage({
			key:'JobId',
			success(resJob) {
				that.requestData.JobId=resJob.data.id;
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy:true,
					success(resLocation){
						that.requestData.Longitude=resLocation.longitude;
						that.requestData.Latitude=resLocation.latitude;
						let opts = {
							url: 'api/TemporaryAnswerQrcodeTopic?IsOK='+that.requestData.IsOk,
							method: 'post'
						};
						that.requestData.Result=JSON.stringify(that.formData)
						request.httpTokenRequest(opts,that.requestData).then(res => {
							that.isButtonDisabled1 = false;
							if(res.data.code == 1){
								uni.hideLoading();
								uni.showToast({ title:'暂存成功', icon: '/static/success.png' });
								// uni.$emit('IsRefresh',true)
								
								let Qrcode_Topic_Back_Refresh={
									SignId:that.requestData.SignId
								}
								uni.setStorageSync('Qrcode_Topic_Back_Refresh', Qrcode_Topic_Back_Refresh); // 设置标记
								uni.navigateBack({
									delta: 1 //返回层数，2则上上页
								});
								// uni.getStorage({
								// 	key: 'PageCur',
								// 	success: function (res1) {
								// 		setTimeout(() => {
								// 			 uni.reLaunch({
								// 				url: '/pages/index/tabbar?PageCur='+res1.data
								// 			 });
								// 		}, 0)
								// 	},fail() {
								// 		setTimeout(() => {
								// 			 uni.reLaunch({
								// 				url: '/pages/index/tabbar?PageCur=home'
								// 			 });
								// 		}, 0)
								// 	}
								// });
							}
							else{
								uni.hideLoading();
								uni.showToast({ title: res.data.msg, icon: 'none' });
							}
						})
					}
					,fail(failres) {
						uni.showToast({ title: '请重试（获取位置信息失败2）', icon: 'none', duration: 3000 });
					}
				})
			}	
		})
	},
	sub1(){
		let that=this
		uni.showModal({
			title: '提示',
			content: '确认结束本次巡检吗？',
			success: function (res) {
				if (res.confirm) {
					that.sub();
				}
			}
		});
	},
    // 提交表单
    sub() {
		//console.log(JSON.stringify(this.formData))
		this.$vervify(this.formData); //表单校验 成功会继续往下走 失败抛出异常
		const res = this.$submitForm(this.formData); //校验成功 获取表单值
		uni.showLoading({
			title: '提交中'
		})
		
		let that=this
		//console.log(JSON.stringify(that.formData))
		
		if(that.isButtonDisabled2){
			return
		}
		that.isButtonDisabled2=true
		if(that.noJobd==1){
			//计划外
			uni.showToast({ title:'请选择任务', icon: 'none' });
			that.isButtonDisabled2 = false;
		}else{
			//计划内
			uni.getStorage({
				key: 'JobId',
				success: function (resJob) {
					that.requestData.JobId=resJob.data.id;
					//获取位置信息
					uni.getLocation({
						type: 'gcj02',
						isHighAccuracy:true,
						//altitude: true,
						success(resLocation) {
							that.requestData.Longitude=resLocation.longitude;
							that.requestData.Latitude=resLocation.latitude;
							let opts = {
								url: 'api/AnswerQrcodeTopic?IsOK='+that.IsOk,
								method: 'post'
							};
							that.requestData.Result=JSON.stringify(that.formData)
							request.httpTokenRequest(opts,that.requestData).then(res => {
							that.isButtonDisabled2 = false;
							if(res.data.code == 1){
								uni.hideLoading();
								uni.showToast({ title:'添加成功', icon: '/static/success.png' });
								let Qrcode_Topic_Back_Refresh={
									SignId:that.requestData.SignId
								}
								uni.setStorageSync('Qrcode_Topic_Back_Refresh', Qrcode_Topic_Back_Refresh); // 设置标记
								uni.navigateBack({
									delta: 1 //返回层数，2则上上页
								});
								// uni.getStorage({
								// 	key: 'PageCur',
								// 	success: function (res1) {
								// 		setTimeout(() => {
								// 			 uni.reLaunch({
								// 				url: '/pages/index/tabbar?PageCur='+res1.data
								// 			 });
								// 		}, 0)
								// 	},fail() {
								// 		setTimeout(() => {
								// 			 uni.reLaunch({
								// 				url: '/pages/index/tabbar?PageCur=home'
								// 			 });
								// 		}, 0)
								// 	}
								// });
							}
							else{
								uni.hideLoading();
								if(res.data.code == 366){
									that.Desc=res.data.msg
									that.dialogToggle()
									
								}else{
									uni.showToast({ title: res.data.msg, icon: 'none' });
								}
							}
						})
						},fail() {
							uni.showToast({ title: '请重试（获取位置信息失败2）', icon: 'none', duration: 3000 });
							that.isButtonDisabled2 = false;
						}
					})
				},fail() {
					uni.showToast({ title: '获取计划失败', icon: 'none', duration: 3000 });
					that.isButtonDisabled2 = false;
				}
			});
		}
	},
	//  获取用户的地理位置，
	getLocation() {
		const that = this
		uni.getLocation({
			type: 'gcj02',
			//altitude: true,
			isHighAccuracy:true,
			success(res) {
				that.requestData.Longitude=res.longitude;
				that.requestData.Latitude=res.latitude;
			}
		})
	}
  },
};
</script>

<style lang="less" scoped>
.form-item .flex-row--c{
	width: 100%;
}
.container {
	width: 750rpx;
	color: #333333;
	.imagesclass{
		width:33%;
		float:left;
		.imagesclassdetail{
			width: 100px !important;
			height: 100px !important;
			margin-right: 20px;
		}
	}
	.bg-top {
		margin-top: -1rpx;
		width: 750rpx;
		height: 220rpx;
		padding-top: 30rpx;
		border-radius: 0 0 20% 20%;

		.top-box {
			width: 700rpx;
			background-color: #FFFFFF;
			margin: 0 auto;
			border-radius: 20rpx;
			padding: 20rpx 30rpx 0rpx;
			position: relative;
		}
	}
	.subform {
		margin:40rpx auto;
		width: 90%;
		text-align: center;
	  padding: 20rpx 60rpx;
	  border-radius: 18rpx;
	  background-color: #0081ff;
		color: white;
	}
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .subform {
	left: 5%;
	bottom: 8%;
	width: 90%;
	text-align: center;
    padding: 20rpx 60rpx;
	margin-bottom: 40rpx;
    border-radius: 18rpx;
    background-color: #0081ff;
	color: white;
  }
}

	.publish-goods-wrap {
		background: rgba(255, 255, 255, .5);
		padding: 24rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.publish-goods-btn {
		margin: 24rpx;
		background: #0079FE;
		color: #FFFFFF;
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 82rpx;
	}

	.goods-empty-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40%;
	}
	
	.content {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  padding-top: 30rpx;
	}
	
	.each{
		width: 100%;
	}
	.repairType{
		border-radius:16rpx 16rpx 0 0;
		box-sizing: border-box;
		width: 94%;
		margin: 0 3%;
		background-color: #fff;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 25rpx;
		font-weight: 600;
		font-size: 34rpx;
		border-bottom:1px solid rgba(242, 242, 242, 1)
	}
	.repairBox{
		border-radius: 0 0 16rpx 16rpx;
		box-sizing: border-box;
		width: 94%;
		margin: 0 3% 0rpx 3%;
		padding: 25rpx ;
		background-color: #fff;
		justify-content: space-around;//实现水平方向均匀布局，space-between水平靠左靠右
		text-align: center;
		.selectType{
			width: 26%;
			height: 60rpx;
			line-height: 60rpx;
			color: #409eff;
			background-color: #f6faff;
			border:1px solid rgba(160, 207, 255, 1);
			border-radius: 5px;
		}
		.eachType{
			width: 26%;
			height: 60rpx;
			line-height: 60rpx;
			color: #999999;
			background-color: #fff;
			border:1px solid rgb(233, 233, 233);
			border-radius: 5px;
			font-size: 38rpx;
		}
	}
	.publish-goods-btn-left {
			width: 44%;
			margin: 12rpx;
			background: #0079FE;
			color: #FFFFFF;
			height: 82rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 82rpx;
			float: left;
		}
		.publish-goods-btn-right {
			width: 44%;
			margin: 12rpx;
			background: #e54d42;
			color: #FFFFFF;
			height: 82rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 82rpx;
			float: right;
		}
</style>